<template>
  <div>
    <el-form
      ref="searchFormRef"
      v-bind:model="queryParam"
      class="thy-form thy-form-vertical ng-pristine ng-invalid ng-touched"
    >
      <el-row>
        <el-col :span="6" v-for="(obj, index) in searchForm" :key="index">
          <el-form-item :prop="obj.field" :label="obj.label" v-if="obj.component === 'Input'">
            <el-input
              size="default"
              v-model.trim="queryParam[obj.field]"
              clearable
              style="width: 150px"
            ></el-input>
          </el-form-item>

          <el-form-item :prop="obj.field" :label="obj.label" v-else-if="obj.component === 'Select'">
            <el-select
              size="default"
              v-model.trim="queryParam[obj.field]"
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="(item, index) in obj.list"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="">
            <!-- 2.0 查询按钮 -->
            <el-button
              size="default"
              type="primary"
              icon="Search"
              @click="doSearch"
              v-show="isShowBtn('Search')"
              >查询</el-button
            >

            <!-- 2.1 重置按钮 -->
            <el-button size="default" type="" icon="RefreshLeft" @click="resetForm">重置</el-button>
            <!-- 2.2 新增按钮 -->
            <el-button
              size="default"
              type="primary"
              icon="Plus"
              @click="handleBtn('add')"
              v-show="isShowBtn('Create')"
              >新增</el-button
            >
            <!-- 2.3 批量删除按钮 -->
            <el-button
              size="default"
              type="danger"
              icon="Delete"
              @click="handleBtn('batchDel')"
              v-show="isShowBtn('BatchDelete')"
              >批量删除</el-button
            >
            <!-- 2.4 情况全部按钮 -->
            <el-button
              size="default"
              type="danger"
              icon="DeleteFilled"
              @click="handleBtn('deleteAll')"
              v-show="isShowBtn('DeleteAll')"
              >清空全部</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { inject, reactive, toRefs, ref } from 'vue'
import { isShowBtn } from '@/utils/util'
export default {
  setup() {
    const state = reactive({
      count: 0,
    })

    // 1.查询条件参数，是需要传给api
    const queryParam = inject('queryParam')

    // 2.查询条件的数组
    const searchForm = inject('searchForm')

    // 3.调用的方法
    const handleApiOpt = inject('handleApiOpt')

    // 4.按钮
    const handleBtn = (opt) => {
      if (opt === 'add') {
        handleApiOpt('', 1)
      }
      if (opt === 'batchDel') {
        handleApiOpt('', 7)
      }
    }

    // 5.查询
    const doSearch = () => {}

    // 6.模板引用
    const searchFormRef = ref(null)
    // 7.重置方法
    const resetForm = () => {
      // debugger
      // 调用form表单对象的resetFields，进行重置
      searchFormRef.value.resetFields()
    }

    return {
      searchFormRef,
      resetForm,
      queryParam,
      searchForm,
      handleBtn,
      isShowBtn,
      doSearch,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
